<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>图片裁剪</title>
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="cropper/layui.css">
  <link rel="stylesheet" href="cropper/public.css">
  <link rel="stylesheet" href="cropper/font-awesome.min.css">
  <link rel="stylesheet" href="cropper/tether.min.css">
  <link rel="stylesheet" href="cropper/bootstrap.min.css">
  <link rel="stylesheet" href="cropper/cropper.css">
  <link rel="stylesheet" href="cropper/main.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
<!--  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
  <![endif]-->
  <style>
    @media (min-width: 576px) {
      .container {
        width: 760px;
        height: 285px;
      }
    }

    body {
      background-color: rgb(247, 247, 247);
    }

    .person {
      font-size: 12px;
      font-family: "NSimSun";
      color: rgb(31, 148, 145);
      line-height: 1.827;
      text-align: justifyLeft;
    }

    input {
      background-color: rgb(255, 255, 255);
      width: 240px;
      height: 20px;
      outline: none;
      border: none;
      font-size: 12px;
      margin-left: 10px;
    }

    .warn {
      font-size: 12px;
      font-family: "NSimSun";
      color: rgb(204, 204, 204);
      line-height: 1.827;
      text-align: justifyLeft;
    }

    .cropper-view-box {
      border-radius: 50%;
    }
    .childrenBody{ padding:10px;}
  </style>
</head>
<body class="childrenBody">
<div class="layui-inline layui-col-md12">
  <div class="layui-input-inline layui-col-md8">
    <div class="layui-row">
      <div class="img-container">
        <img id="image" src="cropper/cropperPic.jpg" alt="Picture">
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-col-md12 docs-buttons">
        <!--重置上传图片-->
        <div class="btn-group btn-group-xs">
          <button type="button" class="btn btn-primary btn-sm" data-method="reset" title="重置" onclick="reset();">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="重置">
                        <i class="layui-icon">&#xe9aa;</i>
                    </span>
          </button>
          <label class="btn btn-primary btn-upload btn-sm" for="inputImage" title="Upload image file">
            <form id="registerForm" enctype="multipart/form-data"  method="post" action=""> <!-- class="sr-only" id="inputImage" -->
              <input type="file" name="file" class="sr-only" id="inputImage" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff" onchange="verificationPicFile(this)">
              <input type="hidden" id="tailor" name="tailor" vlaue="" >
              <input type="hidden" id="cezhan_id" name="id" vlaue="" >
              <input type="hidden" id="num" name="num" vlaue="" >
              <input type="hidden" id="commit_title" name="title" vlaue="" >
              <input type="hidden" id="projectName">
            </form>

            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="上传图片">
		                <i class="layui-icon">&#xe67c;</i>
		            </span>
          </label>
        </div>

        <!--确认选择和返回-->
        <button type="button" class="btn btn-success btn-sm confirm" style="cursor: pointer" title="确认上传">确认上传</button>
        <button type="button" id="fanhui" class="btn btn-success btn-sm back" title="返回" style="cursor: pointer">返回
        </button>

        <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body"></div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-bottom: 20px"></div>
      </div>
    </div>
  </div>
  <div class="layui-input-inline layui-col-md4" style="padding-left: 30px;">
    <div>
      <div class="docs-preview clearfix" style="max-width: 98%;">
        <div class="img-preview preview-lg" style="max-width: 100%;"></div>
      </div>
    </div>
    <!-- <h3>Toggles:</h3> -->
  </div>
</div>
<!-- Scripts -->
<!--<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>-->
<script src="cropper/jquery-1.9.1.js"></script>
<script src="cropper/tether.min.js"></script>
<script src="cropper/bootstrap.min.js"></script>

<script src="../../../statics/js/common.js"></script>

<script src="../../../statics/plugins/layui/layui.js"></script>
<!--<script type="text/javascript" src="../layui/layui.js"></script>-->
<script src="cropper/cropperHead.js"></script>
<script src="cropper/mainHead.js"></script>
<!--<script>-->
<!--$('.img-container > img').cropper({-->
<!--aspectRatio: 1 / 1,-->
<!--strict:false,-->
<!--resizable:false-->
<!--});-->
<!--</script>-->

<script type="text/javascript">
    $('#image').cropper({
        aspectRatio: 1,
        strict:false,
        preview: '.img-preview',
        resizable:true
    });
</script>
<script type="text/javascript">
    layui.use(['layer' ], function () {
        layer = parent.layer === undefined ? layui.layer : top.layer;
        $ = layui.jquery;

        var pathName = window.document.location.pathname;
        var rootName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
        var cropIndex = parent.layui.layer.getFrameIndex(window.name);

        $("#fanhui").click(function() {
            parent.layui.layer.close(cropIndex);
        })

        window.reset = function(){
            location.reload();
        }
        //    $.ajax({
        //        url:"http://192.168.5.188:8080/admin/user/updateUserAva.do?avatarUrl=back/picture/cut/user/36cbb992ab0d4aa991098d3ce955dbcd.jpg&token=2A42FEF04FA5085A09289A888CB6EB02E3A3D5441E48DCE0C707A95EB9366B6D3C2CF9A63087D5A832999E3A72D56E83&userid=75412f3f53634a2e93745fe5225a39bb",
        //        success: function (data) {
        //            console.log(data);
        //        }
        //    })
        $(".confirm").click(function () {
            if (!$('#inputImage').val()) {
                layer.msg("请先上传图片", {time: 2000});
                return false;
            }
//        $('#cezhan_id').val($('#cezhan1Id',window.parent.document).val());   //开始进来的时候拿到一个策展的id
            $("#tailor").val(JSON.stringify($("#image").cropper("getData")));
            var formData = new FormData($("#registerForm")[0]);
            var projectName = $("#projectName").val();
            $.ajax({
                url:  property.getProjectPath() + 'attach/cutPicture.do?projectName='+ projectName,
//                url: 'http://localhost:8080/admin/attach/cutPicture.do?projectName='+ projectName,
//                url: rootName + '/attach/Picture.do?projectName='+ projectName,
                type: "post",
                data: formData,
                dataType: "json",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (result) {
                    if (result.code == 1 && result.msg == '文件上传成功') {
                        var map = result.data;
//            var url = map.absolutePath;                 //拿到图片的路径
//            var id = map.id;
//            var picName = map.realFileName;
                        localStorage["map"]=JSON.stringify(map);
//            parent.$('#parentIframe').val(map);
                        parent.layui.layer.close(cropIndex);
                        //              把标题和图片清空
                    } else {
//                        console.log(result.error.message);
                        layer.alert(result.error.message, {icon: 0});
                        /*layer.alert(result.data,{
                         icon: 0,
                         skin: 'layer-ext-moon'
                         });*/
                    }
                },
                error: function (errData) {
//                    console.log(errData);
                }
            });
        })
        function isEmpty(obj){
            if(typeof obj == "undefined" || obj == null || obj == "")	{
                return true;
            }else{
                return false;
            }
        }
    })

    function verificationPicFile(file) {
        var fileTypes = [".jpg",".jpeg",".png",".gif",".bmp",".tiff"];
        var filePath = file.value;
        //当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false
        if(filePath){
            var isNext = false;
            var fileEnd = filePath.substring(filePath.lastIndexOf("."));
            for (var i = 0; i < fileTypes.length; i++) {
                if (fileTypes[i] == fileEnd) {
                    isNext = true;
                    break;
                }
            }
            if (!isNext){
                alert('不接受此文件类型');
                file.value = "";
                return false;
            }
        }else {
            return false;
        }
    }
</script>
</body>
</html>
